<!--
 * @Description: 图标选择组件
 
 * @Date: 2021-08-23 09:44:05
 
 * @LastEditTime: 2022-01-27 19:43:50
-->
<template>
  <div class="IconSelect">
    <div class="flex">
      <!-- 选中默认图标 -->
      <div class="icon-wrap" @click="show = !show" style="margin:0 15px 0 0">
        <img :src="mValue" v-if="mValue" alt="小程序图标" class="icon ivu-icon imgSize"/>
        <!-- <i class="icon ivu-icon" :class="mValue"></i> -->
      </div>
      <!-- 选中高亮图标 -->
      <!-- <div class="icon-wrap" @click="show = !show">
        <i class="icon ivu-icon" :class="mValue" style="color:#f20c25"></i>
      </div> -->
    </div>
    <VolBox :lazy="true" :model.sync="show" title="选择图标" :width="500" :padding="15" ref="mychid" >
      <div>
        <el-upload :show-file-list="false" :on-change="photoOnChange" :auto-upload="false" action="" class="btn">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <ul class="flex flex-wrap">
        <li
          v-for="icon in iconList"
          :key="icon.file_name"
          class="icon-wrap"
          :class="[mValue == icon.file_name ? 'icon-wrap-active' : '']"
          style="margin: 5px 10px;"
          @click="mValue = icon.file_name">
          <img :src="icon.file_name" alt="小程序图标"  class="ivu-icon imgSize" />
        </li>
      </ul>
    </VolBox>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
export default {
  name: "IconSelect",
  components: { VolBox },
  props: ["value","outIcon"],
  data() {
    return {
      files:{},
      show: false,
      iconListM:[],
      iconList:[],
      // iconList: [
      //   "icon-shop",
      //   "icon-cart",
      //   "icon-goods",
      //   "icon-my",
      //   "icon-sort",
      //   "icon-list",
      //   "icon-choiceness",
        // 'icon-1212',
        // 'icon-activity',
        // 'icon-add',
        // 'icon-add1',
        // 'icon-album',
        // 'icon-all',
        // 'icon-appreciate',
        // 'icon-apps',
        // 'icon-ask',
        // 'icon-attention',
        // 'icon-baby',
        // 'icon-back',
        // 'icon-bad',
        // 'icon-big',
        // 'icon-brand',
        // 'icon-calendar',
        // 'icon-camera',
        // 'icon-cardboard',
        // 'icon-cascades',
        // 'icon-check',
        // 'icon-circle',
        // 'icon-close',
        // 'icon-clothes',
        // 'icon-coffee',
        // 'icon-command',
        // 'icon-comment',
        // 'icon-community',
        // 'icon-copy',
        // 'icon-countdown',
        // 'icon-creative',
        // 'icon-cut',
        // 'icon-delete',
        // 'icon-deliver',
        // 'icon-discover',
        // 'icon-down',
        // 'icon-dress',
        // 'icon-edit',
        // 'icon-emoji',
        // 'icon-evaluate',
        // 'icon-exit',
        // 'icon-explore',
        // 'icon-favor',
        // 'icon-female',
        // 'icon-file',
        // 'icon-filter',
        // 'icon-focus',
        // 'icon-fold',
        // 'icon-footprint',
        // 'icon-form',
        // 'icon-forward',
        // 'icon-friend',
        // 'icon-full',
        // 'icon-furniture',
        // 'icon-game',
        // 'icon-haodian',
        // 'icon-info',
        // 'icon-keyboard',
        // 'icon-like',
        // 'icon-link',
        // 'icon-loading',
        // 'icon-location',
        // 'icon-lock',
        // 'icon-magic',
        // 'icon-mail',
        // 'icon-male',
        // 'icon-mark',
        // 'icon-medal',
        // 'icon-message',
        // 'icon-mobile',
        // 'icon-more',
        // 'icon-move',
        // 'icon-new',
        // 'icon-news',
        // 'icon-notice',
        // 'icon-notification',
        // 'icon-order',
        // 'icon-paint',
        // 'icon-pay',
        // 'icon-people',
        // 'icon-phone',
        // 'icon-pic',
        // 'icon-pick',
        // 'icon-post',
        // 'icon-present',
        // 'icon-profile',
        // 'icon-punch',
        // 'icon-qiang',
        // 'icon-qrcode',
        // 'icon-question',
        // 'icon-rank',
        // 'icon-read',
        // 'icon-recharge',
        // 'icon-record',
        // 'icon-redpacket',
        // 'icon-refresh',
        // 'icon-refund',
        // 'icon-remind',
        // 'icon-repair',
        // 'icon-repeal',
        // 'icon-right',
        // 'icon-round',
        // 'icon-safe',
        // 'icon-scan',
        // 'icon-search',
        // 'icon-selection',
        // 'icon-send',
        // 'icon-service',
        // 'icon-settings',
        // 'icon-shake',
        // 'icon-share',
        // 'icon-similar',
        // 'icon-skin',
        // 'icon-sound',
        // 'icon-sponsor',
        // 'icon-sports',
        // 'icon-square',
        // 'icon-stop',
        // 'icon-subscription',
        // 'icon-tag',
        // 'icon-taxi',
        // 'icon-text',
        // 'icon-ticket',
        // 'icon-time',
        // 'icon-tmall',
        // 'icon-top',
        // 'icon-unfold',
        // 'icon-upload',
        // 'icon-upstage',
        // 'icon-usefull',
        // 'icon-video',
        // 'icon-vip',
        // 'icon-vipcard',
        // 'icon-voice',
        // 'icon-wang',
        // 'icon-warn',
        // 'icon-we',
        // 'icon-weibo',
        // 'icon-wifi',
        // 'icon-write',
      //   'icon-hot',
      //   'icon-crown',
      // ],
      mValue: "",
    };
  },
  methods:{
    getdataListImg(){
      let param = { order: "desc", page: 1, rows: 200, sort: "id", wheres: `[{"name":"storage","value":"OSS-XMR","displayType":"text"}]` };
      this.http.post('/api/FuploadFile/GetPageList', param).then(res => {
        this.iconListM = res.data;
        this.getUpdataList()
      });
    },
    getUpdataList(){
      let param = { order: "desc", page: 1, rows: 500, sort: "id", wheres: `[{"name":"storage","value":"OSS-X","displayType":"text"}]` };
      this.http.post('/api/FuploadFile/getPageData', param).then(res => {
        this.iconList = this.iconListM.concat(res.rows);
      });
    },
    photoOnChange(file) {
      var result = this.beforeAvatarUpload(file);
      if (!result) {
        return;
      }
      let formData = new FormData();
      formData.append("fileInput", file.raw);
      formData.append("type", 0);
      formData.append("storage", "OSS-X");
      this.http.post("api/Small_user_distributors_system/Upload_OSS", formData).then(res => {
        this.getUpdataList();
      });
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.raw.type == "image/jpeg" ||
        file.raw.type == "image/png" ||
        file.raw.type == "image/gif" ||
        file.raw.type == "image/jpg";
      const isSize = file.size / 1024 / 1024 < 6;
      if (!isJPG) {
        this.$message.closeAll();
        this.$message.error("只支持JPG、JPEG、gif、PNG格式!");
      }
      if (!isSize) {
        this.$message.closeAll();
        this.$message.error("上传图片大小不能超过" + 6 + "MB!");
      }
      return isJPG && isSize;
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(newValue, oldValue) {
        this.mValue = newValue;
      },
    },
    show: {
      immediate: true,
      handler(newValue, oldValue) {
        if(this.show){
          this.getdataListImg()
        }
      },
    },
    mValue: {
      immediate: true,
      handler(newValue, oldValue) {
        this.$emit("input", newValue);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../assets/style.css");
.imgSize{
  width: 50px;
  height: 50px;
}
.btn{
  height: 35px;
  float: right;
}
.icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  width: 45px;
  border: 1px solid #e3e2e5;
  border-radius: 4px;
  cursor: pointer;

  i {
    color: #7d7d7d;
    font-size: 36px;
  }
}

.icon-wrap-active {
  border: 1px solid #155bd4;
}
</style>